<template>
  <div class="tw-main">
    <div class="screen" >

      <el-row>
        <!-- <el-col :span="24">
          <el-row class="tw-grid">
            <el-col :lg="24" :span="24" class="tw-grid__left">
              <div style="display:flex; width:100%;">
                <div class="tw-new-title" style="text-align: right;width:300px;">
                  <div style="margin-top:32px;font-size:24px;color:#bad3ff">嘉兴市学校总数 </div>
                  <div style="margin-top:10px;font-size:32px;color:#bad3ff"><span class="digi">{{schoolSumNum}}</span><span style="font-size:24px">所</span></div>
                </div>
                <div ref="echarts_educationZoneSituation" style="width:100%;height:184px"></div>
                <div style="width:100px">&nbsp;</div>
              </div>
            </el-col>
          </el-row>
        </el-col> -->
        <el-col :span="18">
          <el-row class="tw-grid">
            <el-col :lg="8" :span="8" class="tw-grid__left" style="padding-right:0">
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'学校'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/moneLie.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption1.chartOption"
                    :dataset="baroption1.dataset"
                    :chartDataMaps="baroption1.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'占地及绿化用地'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/lvyongd.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption2.chartOption"
                    :dataset="baroption2.dataset"
                    :chartDataMaps="baroption2.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  :label="'教学班'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/teachClass.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption3.chartOption"
                    :dataset="baroption3.dataset"
                    :chartDataMaps="baroption3.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
            </el-col>
            <el-col :lg="16" :span="16" class="tw-grid__right" style="padding:0">
              <tw-midhead widthHead='670px'></tw-midhead>
              <tw-card class="has-no-bg"
                  widthCard='960px' >
                <TwMap :clickDown="false" :mapWidth="'956px'" :mapHeight="'730px'" :styleMpId="'156ea3f72333dcd2b3facdabc673504a'"></TwMap>
              </tw-card>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" style="padding-right: 20px">
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'学生'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/student.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption4.chartOption"
                    :dataset="baroption4.dataset"
                    :chartDataMaps="baroption4.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  mb='20px'
                  :label="'专任教师'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/teachws.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption5.chartOption"
                    :dataset="baroption5.dataset"
                    :chartDataMaps="baroption5.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
              <tw-card
                  widthCard='455px'
                  :heightCard="'290px'"
                  :label="'生师比'">
                  <div class="typeImgBox">
                    <img src="../../../static/weishidataview/images/ssbPiut.png" alt="">
                  </div>
                  <tw-chart
                    :chartOption="baroption6.chartOption"
                    :dataset="baroption6.dataset"
                    :chartDataMaps="baroption6.chartDataMaps"
                    height='220px'
                    width='65%'
                    flot='right'>
                  </tw-chart>
              </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import TwCard from '@/components/TwCard.vue'
import TwEcharts from '@/components/TwEcharts.vue'
import TwBubble from '@/components/TwBubble.vue'
import TwTable from '@/components/TwTable.vue'
import TwItemInfo from '@/components/TwItemInfo.vue'
import TwOldChart from '@/components/TwOldChart.vue'
import cookieUtils from '@/config/cookieUtils'
import TwChart from '@/components/TwChart.vue'
import TwMap from '@/components/tw-map/TwMap.vue'
import twMidhead from '@/components/tw-midhead/tw-midhead.vue'

export default{
  props: [],
  components: {
    TwCard,
    TwEcharts,
    TwBubble,
    TwTable,
    TwItemInfo,
    TwOldChart,
    TwChart,
    cookieUtils,
    TwMap,
    twMidhead
  },
  data () {
    return {
      line: {
        chartOption: {
          color: ['#1890fe', '#00e1f9', '#ffe983', '#85e2b6', '#7e75f6', '#f96c7c'],
          tooltip: {
            show: true,
            trigger: 'item',
            axisPointer: {
              // type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          legend: {
            show: true,
            top: 0,
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            top: '20%',
            left: '3%',
            right: '3%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: true,
            axisLabel: {
              fontSize: 16,
              interval: 0
            },
            data: []
          },
          yAxis: [
            {
              type: 'value',
              axisLabel: {
                fontSize: 16
              },
              splitLine: {
                opacity: 0.12
              },
              axisLine: {
                // lineStyle: '#fff'
              }
            }
          ],
          series: []
        },
        chartDataMaps: [],
        dataset: []
      },
      baroption1:{},
      baroption2: {},
      baroption3: {},
      baroption4: {},
      baroption5: {},
      baroption6: {},
      pie: {
        chartOption: {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [
            {
              name: '',
              type: 'pie',
              // roseType: 'area',
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  textStyle: {
                    fontSize: 16
                  }
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        },
        dataset: [],
        chartDataMaps: []
      },
    }
  },
  created () {
    this.baroption1 = JSON.parse(JSON.stringify(this.line))
    this.baroption2 = JSON.parse(JSON.stringify(this.line))
    this.baroption3 = JSON.parse(JSON.stringify(this.line))
    this.baroption4 = JSON.parse(JSON.stringify(this.pie))
    this.baroption5 = JSON.parse(JSON.stringify(this.pie))
    this.baroption6 = JSON.parse(JSON.stringify(this.line))

  },
  mounted(){

    // 学校
    this.baroption1Init()

    // 占地及绿化用地
    this.baroption2Init()

    // 教学班
    this.baroption3Init()

    // 学生
    this.baroption4Init()

    // 专任教师
    this.baroption5Init()

    // 生师比
    this.baroption6Init()
  },
  methods: {
    // 数组对象排序
    sortData (a, b) {
      return b.yhsl - a.yhsl
    },


    // 学校
    baroption1Init (tabName='总计') {
      let vm=this
      var newConditions = [{
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: ['2019'],
        prepender: 'AND'
      }]
      if (tabName === '特殊') {
        newConditions = [{
          fieldName: 'tjnf',
          operator: 'IN',
          fieldValues: [this.tjnf],
          prepender: 'AND'
        }, {
          fieldName: 'jyjd',
          operator: 'IN',
          fieldValues: [tabName],
          prepender: 'AND'
        }]
      }

      let quary = { 'conditions': [], 'fields': [] }
      let tjnf = 2019
      let timeSectionValue = [{ 'fieldName': 'tjnf', 'fieldValues': [tjnf], 'operator': 'IN', 'prepender': 'AND' }]
      quary.conditions = timeSectionValue
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_sy_qyxxsltj`, quary).then(res=>{
        let {pageInfo, serverResult} = res.data
        if(serverResult.resultCode === '200'){
          let nameList=["学前", "小学", "初中", "普高", "中职", "特殊"]
          let dataSet=[]
          pageInfo.list.forEach(el=>{
            nameList.forEach(item=>{
              if(item===el.jyjb){
                dataSet.push({
                  name:el.jyjb,
                  value:0
                })
              }
            })
          })
          dataSet=this.$getArrListByname(dataSet)
          pageInfo.list.forEach(el=>{
            dataSet.forEach(item=>{
              if(item.name===el.jyjb){
                item.value+=el.xxsl
              }
            })
          })
          console.log(dataSet)
        }
      })

      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jdjcjyssb`, {
        conditions: newConditions,
        orderMethods: [{
          'field': 'jyjd',
          'method': 'ASC'
        }]
      }).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          // 点击时触发
          let toolTip = this.baroption1.chartOption.tooltip
          let xAxis = this.baroption1.chartOption.xAxis
          let colorsList = this.baroption1.chartOption.color
          let yAxis = this.baroption1.chartOption.yAxis
          let legend = this.baroption1.chartOption.legend // 控制 图例的显示
          colorsList[0]='#00e2fe'
          legend.show = false
          yAxis[0].type = 'value'
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 0
          }
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + datas.value + ': 1'
            return res
          }
          let testData = []
          let chartDataMaps = [
            {
              'name': '城',
              'dataKey': 'value'
            }]
          pageInfo.list.forEach(el => {
            testData.push({
              name: el.jyjd,
              value: 0
            })
          })
          testData = this.$getArrListByname(testData)
          pageInfo.list.forEach(el => {
            testData.forEach(item => {
              if (el.jyjd === item.name) {
                let ssbl = el.ssbl || 0
                if (el.qy === '城') {
                  item.value = (ssbl).toFixed(0) - 0
                }
              }
            })
          })

          let a = ['幼儿园', '小学', '初中', '高中', '中职', '特殊']
          let dataseta = []
          a.forEach((itm) => {
            let b = testData.filter(it => it.name === itm)
            let name = itm
            if (itm === '幼儿园') {
              name = '学前'
            } else if (itm === '高中') {
              name = '普高'
            } else if (itm === '特殊') {
              name = '特殊教育'
            }
            if (b.length > 0) {
              dataseta.push({
                name: name,
                value: b[0].value
              })
            } else {
              dataseta.push({
                name: name,
                value: 0
              })
            }
          })
          this.baroption1.dataset = dataseta
          console.log(dataseta)
          this.baroption1.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 22,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })
    },

    // 占地及绿化用地
    baroption2Init (tabName) {
      var newConditions = [{
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: ['2019'],
        prepender: 'AND'
      }]
      if (tabName === '特殊') {
        newConditions = [{
          fieldName: 'tjnf',
          operator: 'IN',
          fieldValues: [this.tjnf],
          prepender: 'AND'
        }, {
          fieldName: 'jyjd',
          operator: 'IN',
          fieldValues: [tabName],
          prepender: 'AND'
        }]
      }
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jdjcjyssb`, {
        conditions: newConditions,
        orderMethods: [{
          'field': 'jyjd',
          'method': 'ASC'
        }]
      }).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          // 点击时触发
          let toolTip = this.baroption2.chartOption.tooltip
          let xAxis = this.baroption2.chartOption.xAxis
          let yAxis = this.baroption2.chartOption.yAxis
          let legend = this.baroption2.chartOption.legend // 控制 图例的显示
          legend.show = true
          yAxis[0].type = 'value'
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 0
          }
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + datas.value + ': 1'
            return res
          }
          let testData = []
          let chartDataMaps = [
            {
              'name': '城',
              'dataKey': 'value'
            },
            {
              'name': '镇',
              'dataKey': 'value1'
            }]
          pageInfo.list.forEach(el => {
            testData.push({
              name: el.jyjd,
              value: 0,
              value1: 0
            })
          })
          testData = this.$getArrListByname(testData)
          pageInfo.list.forEach(el => {
            testData.forEach(item => {
              if (el.jyjd === item.name) {
                let ssbl = el.ssbl || 0
                if (el.qy === '城') {
                  item.value = (ssbl).toFixed(0) - 0
                } else if (el.qy === '镇') {
                  item.value1 = (ssbl).toFixed(0) - 0
                }
              }
            })
          })

          let a = ['幼儿园', '小学', '初中', '高中', '中职', '特殊']
          let dataseta = []
          a.forEach((itm) => {
            let b = testData.filter(it => it.name === itm)
            let name = itm
            if (itm === '幼儿园') {
              name = '学前'
            } else if (itm === '高中') {
              name = '普高'
            } else if (itm === '特殊') {
              name = '特殊教育'
            }
            if (b.length > 0) {
              dataseta.push({
                name: name,
                value: b[0].value,
                value1: b[0].value1
              })
            } else {
              dataseta.push({
                name: name,
                value: 0,
                value1: 0
              })
            }
          })
          this.baroption2.dataset = dataseta
          this.baroption2.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 20,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })
    },

    // 教学班
    baroption3Init (jyjdRoute = '总计') {
      var newConditions = [{
        fieldName: 'jyjd',
        operator: 'IN',
        fieldValues: [jyjdRoute],
        prepender: 'AND'
      }, {
        fieldName: 'tjly',
        operator: 'IN',
        fieldValues: ['职称'],
        prepender: 'AND'
      }]
      let vm = this
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jsjdxlcznnbltj`, {conditions: newConditions, 'orderMethods': [{'field': 'tjnf', 'method': 'ASC'}]}).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let yaxislabel = this.baroption3.chartOption.yAxis[0].axisLabel
          yaxislabel.formatter = '{value}' + '%'
          let colorList = this.baroption3.chartOption
          let toolTip = this.baroption3.chartOption.tooltip
          let tipNumList = []
          toolTip.formatter = function (datas) {
            var res = ''
            tipNumList.forEach(el => {
              if (datas.name === el.name) {
                el.list.forEach(item => {
                  if (item.name === datas.seriesName) {
                    res = datas.marker + datas.name + '<br/>' + datas.seriesName + ': ' + datas.value + '%' + '<br/>人数: ' + vm.$reformNumber(item.sl) + '人'
                  }
                })
              }
            })
            return res
          }
          colorList.color = ['#1a8fff', '#ffea7f', '#ffea81', '#83e6b7', '#10caa3', '#4b6aff', '#7e75f6', '#f96c7c']
          let dataset = []
          let sumData = []
          let chartDataMaps = [
            {
              'name': '高级',
              'dataKey': 'value5'
            },
            {
              'name': '中级',
              'dataKey': 'value3'
            }]
          pageInfo.list.forEach(el => {
            if (el.tjnf !== '2014' && el.tjnf !== '2015' && el.tjnf !== '2016') {
              dataset.push({
                name: el.tjnf + '年',
                value3: 0,
                value5: 0
              })
              sumData.push({
                name: el.tjnf + '年',
                sumValue: 0
              })
              tipNumList.push({name: el.tjnf + '年', list: []})
            }
          })
          dataset = this.$getArrListByname(dataset)
          sumData = this.$getArrListByname(sumData)
          tipNumList = this.$getArrListByname(tipNumList)
          pageInfo.list.forEach(el => {
            sumData.forEach(item => {
              if (item.name === el.tjnf + '年' && el.tjlx !== '中级及以上（全省）' && el.tjlx !== '中级及以上（全国）' && el.tjlx !== '助理级') {
                item.sumValue += el.sl
              }
            })
            tipNumList.forEach(ele => {
              if (el.tjnf + '年' === ele.name) {
                if (el.tjlx === '高级') {
                  ele.list.push({
                    name: '高级',
                    sl: el.sl
                  })
                } else if (el.tjlx === '中级') {
                  ele.list.push({
                    name: '中级',
                    sl: el.sl
                  })
                }
              }
            })
          })
          pageInfo.list.forEach(el => {
            dataset.forEach(item => {
              if (item.name === el.tjnf + '年') {
                if (el.tjlx === '高级') {
                  item.value5 = (el.sl)
                } else if (el.tjlx === '中级') {
                  item.value3 = (el.sl)
                }
              }
            })
          })
          dataset.forEach(el => {
            sumData.forEach(item => {
              if (item.name === el.name) {
                el.value3 = (parseInt((el.value3 / item.sumValue) * 10000)) / 100
                el.value5 = (parseInt((el.value5 / item.sumValue) * 10000)) / 100
              }
            })
          })
          this.baroption3.dataset = dataset
          this.baroption3.chartDataMaps = chartDataMaps.map((item, index) => {
            if (item.dataKey === 'value6' || item.dataKey === 'value7') {
              return {
                ...item,
                type: 'line',
                itemStyle: {
                  normal: {
                    lineStyle: {
                      width: 2
                    }
                  }
                }
              }
            } else {
              return {
                ...item,
                type: 'bar',
                stack: 'bar',
                barMaxWidth: 22
              }
            }
          })
        }
      })
    },



    // 学生
    baroption4Init (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_xstzjktj?tjly=体质健康&tjnf=2019&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let dataset = []
          let chartDataMaps = [{
            dataKey: 'value',
            name: '体质健康'
          }]
          pageInfo.list.forEach(el => {
            dataset.push({
              name: el.jklx,
              value: el.xssl
            })
          })
          this.baroption4.dataset = dataset
          this.baroption4.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'pie',
              radius: [0, 60],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              roseType: 'radius',
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: '{b}\n{d}%',
                  alignTo: 'none'
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },



    // 专任教师
    baroption5Init (jyjdRoute = '总计') {
      this.$axios.get(`/tw-cloud-datatheme-server/themedata/app_xsxx_xstzjktj?tjly=体质健康&tjnf=2019&jyjd=` + jyjdRoute).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          let dataset = []
          let chartDataMaps = [{
            dataKey: 'value',
            name: '体质健康'
          }]
          pageInfo.list.forEach(el => {
            dataset.push({
              name: el.jklx,
              value: el.xssl
            })
          })
          this.baroption5.dataset = dataset
          this.baroption5.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'pie',
              radius: [40, 60],
              center: ['50%', '50%'],
              avoidLabelOverlap: true,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    fontSize: 16
                  },
                  formatter: '{b}\n{d}%',
                  alignTo: 'none'
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              }
            }
          })
        }
      }).catch(res => {
        console.log(res)
      })
    },



    // 生师比
    baroption6Init (tabName='总计') {
      var newConditions = [{
        fieldName: 'tjnf',
        operator: 'IN',
        fieldValues: ['2019'],
        prepender: 'AND'
      }]
      if (tabName === '特殊') {
        newConditions = [{
          fieldName: 'tjnf',
          operator: 'IN',
          fieldValues: [this.tjnf],
          prepender: 'AND'
        }, {
          fieldName: 'jyjd',
          operator: 'IN',
          fieldValues: [tabName],
          prepender: 'AND'
        }]
      }
      this.$axios.post(`/tw-cloud-datatheme-server/themedata/app_jsxx_jdjcjyssb`, {
        conditions: newConditions,
        orderMethods: [{
          'field': 'jyjd',
          'method': 'ASC'
        }]
      }).then(resp => {
        let {pageInfo, serverResult} = resp.data
        if (serverResult.resultCode === '200') {
          // 点击时触发
          let toolTip = this.baroption6.chartOption.tooltip
          let xAxis = this.baroption6.chartOption.xAxis
          let yAxis = this.baroption6.chartOption.yAxis
          let legend = this.baroption6.chartOption.legend // 控制 图例的显示
          legend.show = false
          yAxis[0].type = 'value'
          xAxis.axisLabel = {
            fontSize: 14,
            interval: 0,
            rotate: 0
          }
          toolTip.formatter = function (datas) {
            var res = datas.marker + datas.name + datas.value + ': 1'
            return res
          }
          let testData = []
          let chartDataMaps = [
            {
              'name': '城',
              'dataKey': 'value'
            }]
          pageInfo.list.forEach(el => {
            testData.push({
              name: el.jyjd,
              value: 0
            })
          })
          testData = this.$getArrListByname(testData)
          pageInfo.list.forEach(el => {
            testData.forEach(item => {
              if (el.jyjd === item.name) {
                let ssbl = el.ssbl || 0
                if (el.qy === '城') {
                  item.value = (ssbl).toFixed(0) - 0
                }
              }
            })
          })

          let a = ['幼儿园', '小学', '初中', '高中', '中职', '特殊']
          let dataseta = []
          a.forEach((itm) => {
            let b = testData.filter(it => it.name === itm)
            let name = itm
            if (itm === '幼儿园') {
              name = '学前'
            } else if (itm === '高中') {
              name = '普高'
            } else if (itm === '特殊') {
              name = '特殊教育'
            }
            if (b.length > 0) {
              dataseta.push({
                name: name,
                value: b[0].value
              })
            } else {
              dataseta.push({
                name: name,
                value: 0
              })
            }
          })
          this.baroption6.dataset = dataseta
          this.baroption6.chartDataMaps = chartDataMaps.map((item, index) => {
            return {
              ...item,
              type: 'bar',
              itemStyle: {
                barBorderRadius: [5, 5, 0, 0]
              },
              barMaxWidth: 22,
              label: {
                show: false,
                fontSize: 16,
                position: 'top'
              }
            }
          })
        }
      })
    },

  },

}
</script>

<style scoped>
  .typeImgBox{
    float: left;
    width: 35%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

</style>
